<template>

  <div :class="prefixCls">
    <div :class="`${prefixCls}-filters`">
      <el-form :model="filters" inline ref="ruleForm"  >
        <el-form-item prop="logname" label="登录名：" >
          <el-input
            placeholder="请输入登录名"
            v-model="filters.logname"
            :class="`${prefixCls}-filters-input`"
            clearable
          />
        </el-form-item>
        <el-form-item prop="name" label="姓名：" >
          <el-input
            placeholder="请输入姓名"
            v-model="filters.name"
            :class="`${prefixCls}-filters-input`"
            clearable
          />
        </el-form-item>
        <div :class="`${prefixCls}-filters-button`">
          <el-button type="primary" @click="searchForm('ruleForm')">搜索</el-button>
          <el-button @click="resetForm('ruleForm', 'reset')" class="reset-btn">重置</el-button>
        </div>
      </el-form>
    </div>
    <div :class="`${prefixCls}-table`">
      <el-table
        ref="tableData"
        header-align="center"
        :data="tableData"
        :header-cell-style="{background:'rgba(117, 60, 202, 0.04)'}"
        :class="`${prefixCls}-table-width`"
      >
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          :resizable="false"
        >

        </el-table-column>

        <el-table-column
          prop="logName"
          label="登录名称"
          min-width="100"
          align="center"
          :resizable="false"
        >

        </el-table-column>

        <el-table-column
          prop="name"
          label="姓名"
          min-width="100"
          align="center"
          :resizable="false"
        >
        </el-table-column>

        <el-table-column
          prop="sex"
          label="性别"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{isNil(scope.row.sex) ? '' :(scope.row.sex === 1 ? '男' : '女')}}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column
          prop="email"
          label="邮箱"
          min-width="120"
          align="center"
          :resizable="false"
        >
        </el-table-column> -->

        <el-table-column
          prop="state"
          label="机构用户关联状态"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{scope.row.state === 1 ? '有效' : '无效'}}</span>
          </template>
        </el-table-column>

        <template slot="empty">
          <div >
            <img  class="no-data-img" src="@/assets/img/empty.png"/>
          </div>
          <span>暂无数据</span>
        </template>

      </el-table>
    </div>

    <!-- 列表数据分页 -->
    <div :class="`${prefixCls}-pagination`"  v-if="Number(pagination.total)>0">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.offset"
        :page-sizes="[10, 20, 50]"
        :page-size="pagination.limit"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import { isNil } from 'lodash-es'
export default {
  name: 'deptManageTable',

  components: {
  },

  data () {
    return {
      filters: {
        logname: '',
        name: ''
      }
    }
  },

  props: {
    tableData: Array,
    pagination: Object,
    prefixCls: {
      type: String,
      default: 'dept-manage-table',
    },
  },

  computed: {
    resObj: function() {
      return { ...this.filters }
    }
  },

  watch: {

  },

  mounted () {
  },

  methods: {
    isNil,
    /**
     * 翻页操作事件
     * @return {undefined}
     */
    handleSizeChange(val) {
      const page = {
        ...this.pagination,
        offset: 1,
        limit: val
      }
      this.$emit('getPagination', page)
    },

    /**
     * 翻页操作事件
     * @return {undefined}
     */
    handleCurrentChange(val) {
      const page = {
        ...this.pagination,
        offset: val,
      }
      this.$emit('getPagination', page)
    },
    searchForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('getSearchList', this.resObj)
        } else {
          return false
        }
      })
    },
    resetForm(formName, reset) {
      this.$refs[formName].resetFields()
      this.filters = {
        ...this.resObj
      }
      if (reset) {
        this.$emit('getSearchList', this.filters)
      }
    },
  }
}
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
